<template>
  <div id="box">
    <header class="head">
      <p>{{title}}</p>
    </header>
    <nav class="jinbi">
      <div class="shangcheng">
        <div class="zuo">
          <h1>{{jinbi}}</h1>
          <p>{{list[0]}}</p>
        </div>
        <div class="you">
          <img src="../assets/dierimg/1.png" alt="">
        </div>
      </div>
      <div class="shangcheng">
        <div class="zuo">
          <h2>土建有奖</h2>
          <p>{{list[0]}}</p>
        </div>
        <div class="you">
          <img src="../assets/dierimg/1.png" alt="">
        </div>
      </div>
      <div class="shangcheng">
        <div class="zuo">
          <h3>周边优惠</h3>
          <p>{{list[0]}}</p>
        </div>
        <div class="you">
          <img src="../assets/dierimg/1.png" alt="">
        </div>
      </div>
      <div class="shangcheng">
        <div class="zuo">
          <h4>免费流量</h4>
          <p>{{list[0]}}</p>
        </div>
        <div class="you">
          <img src="../assets/dierimg/1.png" alt="">
        </div>
      </div>

    </nav>
    <div class="clear" style="clear:both;"></div>
    <div class="shangjin">
      <img src="../assets/dierimg/2.png" alt="">

    </div>
    <div class="tuijian">
      <div class="top-wei">

        <p> <img src="../assets/dierimg/3.png" alt=""> 为你推荐 <img src="../assets/dierimg/4.png" alt="">
        </p>
        <p>你的口味，我都懂得</p>
      </div>

      <div class="hanbao-zuo">
        <dl>
          <dt> <img src="../assets/dierimg/5.png" alt=""></dt>
          <dd>
            <h3>蛋炒饭</h3>
          </dd>
          <dd>
            <i>月售15份 好评率100%</i>
          </dd>
          <dd>￥
            <em>13</em>
            <span>满26减5</span>
          </dd>
          <p>沙县小吃</p>
        </dl>

      </div>
      <div class="hanbao-zuo">
        <dl>
          <dt> <img src="../assets/dierimg/5.png" alt=""></dt>
          <dd>
            <h3>蛋炒饭</h3>
          </dd>
          <dd>
            <i>月售15份 好评率100%</i>
          </dd>
          <dd>￥
            <em>13</em>
            <span>满26减5</span>
          </dd>
          <p>沙县小吃</p>
        </dl>

      </div>
      <div class="clear" style="clear:both;"></div>

      <div class="duo-bottom">
        <p>查看更多 ></p>
      </div>

    </div>

    <div class="top-xian">
      <div class="top-wei">

        <p> <img src="../assets/dierimg/3.png" alt="">限时好礼 <img src="../assets/dierimg/4.png" alt="">
        </p>
        <p>金币换豪礼</p>
      </div>

      <div class="youhui">

        <dl>
          <dt><img src="../assets/dierimg/6.png" alt=""></dt>
          <dd>3元饿了红包</dd>
          <dd>
            <span>
              90金币</span>
            <s>3</s>
          </dd>
        </dl>

      </div>
      <div class="youhui">

        <dl>
          <dt><img src="../assets/dierimg/6.png" alt=""></dt>
          <dd>3元饿了红包</dd>
          <dd>
            <span>
              90金币</span>
            <s>3</s>
          </dd>
        </dl>

      </div>
      <div class="youhui">

        <dl>
          <dt><img src="../assets/dierimg/6.png" alt=""></dt>
          <dd>3元饿了红包</dd>
          <dd>
            <span>
              90金币</span>
            <s>3</s>
          </dd>
        </dl>

      </div>

      <div class="clear" style="clear:both;"></div>

    </div>

  </div>
</template>



<script>
export default {
  data() {
    return {
      title: '发现',
      jinbi: '金币商城',
      list: ["0元好物在这里", ""]

    }
  },
}
</script>


<style>
#box {
  margin-bottom: 80px;
}

.head {
  width: 100%;
  height: 70px;
  background-color: #008afd;
  line-height: 70px;
  text-align: center;
  color: #ffffff;
  font-size: 1.333rem;
}

.shangcheng {
  width: 49%;
  float: left;
  margin-top: 5%;
}

.shangcheng .zuo {
  float: left;
  width: 45%;
  line-height: 30px;


  padding-left: 8%;
}

.shangcheng .zuo h1 {
  color: yellow;
  font-weight: bolder;
}

.shangcheng .zuo h2 {
  color: skyblue;
  font-weight: bolder;
}

.shangcheng .zuo h3 {
  color: #c28886;
  font-weight: bolder;
}

.shangcheng .zuo h4 {
  color: #ec8a8b;
  font-weight: bolder;
}




.shangcheng .zuo p {
  color: #d8d8d8;
}


.shangcheng .you img {
  width: 100px;
  float: right;
}

.shangjin {
  width: 100%;
  height: 110px;
  padding-top: 25px;
}

.shangjin img {
  width: 100%;
}

.top-wei p {
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.top-wei p img {
  width: 10%;
  margin-bottom: -6px;
}

.hanbao-zuo {
  width: 46%;
  float: left;
  margin-left: 2%;
  margin-top: 5%;
  border: 1px solid #d8d8d8;
}

.hanbao-zuo img {
  width: 100%;
}

.hanbao-zuo dl dd {
  line-height: 30px;
  padding-left: 2%;
}

.hanbao-zuo dl dd h3 {
  font-size: 18px;
  font-weight: bold;
}

.hanbao-zuo dl dd i {
  font-size: 12px;
}

.hanbao-zuo dl dd:nth-of-type(3) {
  color: red;
}

.hanbao-zuo dl dd em {
  font-size: 20px;
  color: red;
}

.hanbao-zuo dl dd:nth-of-type(3) span {
  display: inline-block;
  border: 3px solid #fa6c68;
  width: 33%;
  border-radius: 10px;
  text-align: center;
}

.hanbao-zuo p {
  margin-top: 5px;
  border-top: 3px dashed #d8d8d8;
  line-height: 50px;
  color: #d8d8d8;
  font-weight: bold;
  padding-left: 10px;
}

.youhui {
  float: left;
  width: 30%;
  margin-left: 3%;
}

.youhui dl dd {
  line-height: 30px;
}

.youhui dl dt img {
  width: 100%;
}

.youhui dl dd span {
  color: red;
}
</style>